<template>
  <div>
    <v-header title="商城" :back="true"></v-header>
    <!-- 导航部分 -->
    <div id="daohang">
      <div class="top1">
        <p class="iconfont p1">&#xe613;</p>
        <img :src="require('../../assets/images/logo.jpg')" alt="" />
        <van-search
          v-model="value"
          placeholder="按内容搜索"
          @keydown.enter="enter"
          class="in1"
        />
        <p class="iconfont">&#xe663;</p>
      </div>
      <div class="bottom1">
        <nav
          :style="{
            background:
              'url(' +
              require('../../assets/images/line.jpg') +
              ')no-repeat right top',
          }"
        >
          <span
            v-for="item in navArr"
            :key="item.id"
            @click="toList(item.id)"
            >{{ item.catename }}</span
          >
        </nav>
        <p>
          <span class="iconfont">&#xe611; 分类</span>
        </p>
      </div>
    </div>

    <div id="center1">
      <!-- banner部分 -->
      <van-swipe
        class="my-swipe"
        :autoplay="3000"
        indicator-color="white"
        id="banner1"
      >
        <van-swipe-item v-for="item in banner" :key="item.id"
          ><img :src="'http://localhost:3000' + item.img" alt=""
        /></van-swipe-item>
      </van-swipe>
      <!-- banner下导航部分 -->
      <ul id="daohang1">
        <li>
          <img :src="require('../../assets/images/icon_1.jpg')" alt="" />
          <p>限时秒杀</p>
        </li>
        <li>
          <img :src="require('../../assets/images/icon_2.jpg')" alt="" />
          <p>畅销商品</p>
        </li>
        <li>
          <img :src="require('../../assets/images/icon_3.jpg')" />
          <p>品质大牌</p>
        </li>
        <li>
          <img :src="require('../../assets/images/icon_4.jpg')" />
          <p>小U自营</p>
        </li>
        <li>
          <img :src="require('../../assets/images/icon_5.jpg')" />
          <p>积分商城</p>
        </li>
      </ul>

      <!-- 限时秒杀部分 -->
      <div id="xsms">
        <div
          class="left"
          :style="{
            background:
              'url(' +
              require('../../assets/images/shop_bg1.png') +
              ')no-repeat',
          }"
        >
          <p class="p1">
            <span>限时秒杀</span>
            <a href="#" class="iconfont">查看更多&#xe601;</a>
          </p>
          <p class="p2">每天0点场，好货秒不停</p>
          <p class="p3"><i>05</i><em>:</em><i>20</i><em>:</em><i>48</i></p>
        </div>
        <div class="right">
          <div
            class="top1"
            :style="{
              background:
                'url(' +
                require('../../assets/images/shop_bg2.png') +
                ')no-repeat',
            }"
          >
            <p class="p1">品牌上新</p>
            <p class="p2">九点整，抢大牌</p>
            <p><img :src="require('../../assets/images/mark_1.jpg')" /></p>
          </div>
          <div
            class="bottom1"
            :style="{
              background:
                'url(' +
                require('../../assets/images/shop_bg3.png') +
                ')no-repeat',
            }"
          >
            <p class="p1">日用好物</p>
            <p class="p2">愿君多采撷</p>
            <p><img :src="require('../../assets/images/mark_2.jpg')" /></p>
          </div>
        </div>
      </div>

      <!-- 双 11部分 -->
      <div id="shuang11">
        <div class="top1">
          <p>
            <span
              v-for="(item, index) in arr"
              :key="item"
              :class="index == n ? 'select' : ''"
              @click="qiehuan(index)"
              >{{ item }}</span
            >
          </p>
        </div>
        <ul v-if="xuanxiang1.length>0">
          <li
            v-for="item in xuanxiang1[n].content"
            :key="item.id"
            @click="spxq(item.id)"
          >
            <img :src="'http://localhost:3000' + item.img" />
            <div class="right1">
              <p class="p1">{{ item.goodsname }}</p>
              <p class="p2">现在价格：￥{{ item.price }}</p>
              <del>原价格：￥{{ item.market_price }}</del>
              <p class="p3">立即抢购</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  methods: {
    enter() {
      this.$router.push("/sousuo?id=" + this.value);
    },
    toList(id) {
      this.$router.push("/list?id=" + id);
    },
    qiehuan(index) {
      this.n = index;
    },
    spxq(id) {
      this.$router.push("/spxq/" + id);
    },
  },
  data() {
    return {
      navArr: [],
      banner: [],
      xuanxiang1: [],
      value: "",
      arr: ["热门推荐", "上新推荐", "所有商品"],
      n: 0,
    };
  },
  mounted() {
    //获取快速导航
    axios({
      url: "/api/getcate",
      method: "get",
    }).then((res) => {
      this.navArr = res.data.list;
    });
    axios.get("/api/getbanner").then((res) => {
      this.banner = res.data.list;
    });
    axios({
      url: "/api/gethortgoods",
      method: "get",
    }).then((res) => {
      this.xuanxiang1 = res.data.list;
      // console.log(res);
    });
  },
};
</script>

<style scoped>
.select {
  background: springgreen;
  color: #fff;
}
#center1 {
  margin-top: 1.4rem;
}
.my-swipe {
  width: 100vw;
  height: 3.3rem;
}
/* 导航部分*/
#daohang {
  background-image: linear-gradient(#ff6040, #ff8273);
  height: 1.4rem;
  width: 7.5rem;
  position: fixed;
  z-index: 2;
}
#daohang .top1 {
  display: flex;
  height: 0.66rem;
  align-items: center;
  color: #fff;
  margin-bottom: 0.12rem;
}
#daohang .top1 .iconfont {
  font-size: 0.4rem;
}
#daohang .top1 .p1 {
  margin-left: 0.2rem;
}
#daohang .top1 img {
  height: 0.5rem;
  margin: 0 0.38rem 0 0.2rem;
}
#daohang .top1 .in1 {
  background: rgba(0, 0, 0, 0);
  margin-left: -0.2rem;
}
.van-search__content {
  width: 3.4rem;
  height: 0.6rem;
  line-height: 0.6rem;
  border: 0.02rem solid #e8e0df;
  border-radius: 0.1rem;
  padding-left: 0.22rem;
}
#daohang .bottom1 {
  display: flex;
  height: 0.62rem;
  font-size: 0.26rem;
}
#daohang .bottom1 nav {
  display: flex;
  width: 6.2rem;
  height: 0.62rem;
  line-height: 0.62rem;
  justify-content: space-around;
  overflow: hidden;
}
#daohang .bottom1 nav span {
  line-height: 0.62rem;
  text-align: center;
  color: #fff;
  font-size: 0.26rem;
  margin-right: 0.2rem;
  overflow: hidden;
}
#daohang .bottom1 nav span.a1 {
  font-size: 0.3rem;
  font-weight: bold;
  position: relative;
}
#daohang .bottom1 nav span.a1 span {
  width: 0.4rem;
  height: 0.04rem;
  background: #fff;
  position: absolute;
  bottom: 0;
  left: 0.08rem;
}
#daohang .bottom1 nav span:nth-child(1) {
  margin-left: 0.2rem;
}
#daohang .bottom1 nav span:nth-child(6) {
  margin-right: 0.16rem;
}
#daohang .bottom1 p {
  width: 1.3rem;
  text-align: center;
  height: 0.62rem;
  line-height: 0.62rem;
  color: #fff;
}
#daohang .bottom1 p span {
  font-size: 0.28rem;
}
#center1 {
  flex: 1;
  overflow: auto;
}
/*banner部分*/
#banner1 img {
  width: 100%;
  /* position: absolute; */
  /* top: 2.7rem; */
}
/*banner下导航部分*/
#daohang1 {
  /* margin-top: 5.6rem; */
  display: flex;
  background: #fff;
  height: 2rem;
  text-align: center;
  margin-bottom: 0.2rem;
}
#daohang1 li {
  width: 1.5rem;
  height: 1.6rem;
  margin-top: 0.2rem;
}
#daohang1 li img {
  width: 0.91rem;
  display: block;
  margin: auto;
  margin-top: 0.2rem;
  margin-bottom: 0.05rem;
}
/*限时秒杀*/
#xsms {
  width: 7.1rem;
  height: 3.5rem;
  margin: 0 auto;
  margin-bottom: 0.2rem;
}
#xsms .left {
  float: left;
  width: 3.5rem;
  height: 3.5rem;
  /* background: url(../images/shop_bg1.png) no-repeat; */
  background-size: 100%;
  padding-top: 0.16rem;
  box-sizing: border-box;
}
#xsms .left .p1 {
  display: flex;
  justify-content: space-between;
}
#xsms .left .p1 span {
  color: #85a642;
  font-size: 0.32rem;
  margin-left: 0.2rem;
  font-weight: bold;
}
#xsms .left .p1 a {
  color: #393938;
}
#xsms .left .p2 {
  color: #b6ce82;
  margin-left: 0.2rem;
  margin-top: 0.1rem;
  font-size: 0.18rem;
}
#xsms .left .p3 {
  margin-top: 0.08rem;
  margin-left: 0.2rem;
}
#xsms .left .p3 i {
  width: 0.33rem;
  height: 0.36rem;
  background: #89aa48;
  color: #fff;
  border-radius: 0.05rem;
  margin-right: 0.04rem;
}
#xsms .left .p3 em {
  color: #89aa48;
  font-size: 0.2rem;
  margin-right: 0.04rem;
}
#xsms .right {
  float: right;
}
#xsms .right .top1 {
  padding-top: 0.16rem;
  box-sizing: border-box;
  width: 3.5rem;
  height: 1.7rem;
  margin-bottom: 0.1rem;
  /* background: url(../images/shop_bg2.png) no-repeat; */
  background-size: 100%;
}
#xsms .right .top1 .p1 {
  color: #ff8067;
  font-size: 0.32rem;
  margin-left: 0.2rem;
  font-weight: bold;
}
#xsms .right .top1 .p2 {
  color: #ff9984;
  margin-top: 0.1rem;
  margin-left: 0.2rem;
  margin-bottom: 0.06rem;
}
#xsms .right .top1 img {
  width: 1.2rem;
  margin-left: 0.2rem;
}
#xsms .right .bottom1 {
  width: 3.5rem;
  height: 1.7rem;
  /* background: url(../images/shop_bg3.png) no-repeat; */
  background-size: 100%;
}
#xsms .right .bottom1 .p1 {
  color: #af40ff;
  font-size: 0.32rem;
  margin-left: 0.2rem;
  font-weight: bold;
}
#xsms .right .bottom1 .p2 {
  color: #ce8bff;
  margin-top: 0.1rem;
  margin-left: 0.2rem;
  margin-bottom: 0.06rem;
}
#xsms .right .bottom1 img {
  width: 1.2rem;
  margin-left: 0.2rem;
}
/*双 11 部分*/
#shuang11 {
  margin-top: 0.2rem;
  background: #fff;
  margin-bottom: 1.6rem;
  width: 7.1rem;
  margin: auto;
}
#shuang11 .top1 {
  display: flex;
  width: 7.6rem;
  height: 0.84rem;
}
#shuang11 .top1 p {
  height: 0.84rem;
  width: 7.6rem;
  line-height: 0.84rem;
  text-align: center;
}
#shuang11 .top1 p span {
  height: 0.84rem;
  color: #ff6040;
  font-size: 0.28rem;
  padding: 0.1rem;
  /* margin-right: 2rem; */
  font-weight: bold;
  margin: 0.5rem;
}
#shuang11 ul {
  display: flex;
  width: 6.7rem;
  flex-wrap: wrap;
  margin: auto;
  justify-content: space-around;
  margin-bottom: 1rem;
}
#shuang11 ul li {
  width: 100vw;
  margin-bottom: 0.2rem;
  padding: 0.2rem 0;
  box-shadow: 0.01rem 0.1rem 0.1rem 0.02rem #999;
}
#shuang11 ul li img {
  width: 2.5rem;
  height: 2.5rem;
  margin-left: 0.2rem;
  float: left;
}
#shuang11 ul li p {
  text-align: center;
  margin-top: 0.05rem;
}
#shuang11 ul li .right1 {
  float: right;
}
</style>